<template>
  <div class="mt-input">
<!--    <div>{{nativeValue}}</div>-->
    <input class="mt-form-input" value="{{nativeValue}}" bindinput="onInput"/>
  </div>
</template>

<script>
  const formEmitterBehavior = require('../../static/emitter.behavior')
  const formELementBehavior = require('../../static/form-element.behavior')

  export default {
    behaviors: [
      formEmitterBehavior,
      formELementBehavior
    ],
    relations: {
      '../mt-form-item/index': {
        type: 'ancestor', // 关联的目标节点应为祖先节点
        linked(v) {
          this.formItem = v
          // console.log('this.formItem', this.formItem)
        },
        unlinked() {
          this.formItem = null
        }
      }
    },
    properties: {
      sModel: null
    },
    observers: {
      'sModel': function (field) {
        // console.log('field', field, this.data.sModel)
        this.setNativeValue(this.data.sModel)
      }
    },
    attached() {
      this.formItem = null
    },
    data() {
      return {
        nativeValue: null
      }
    },
    methods: {
      onInput(event) {
        let {value, cursor, keyCode} = event.detail
        // console.log('value', value)
        this.$native.emit('input', value)
        this.setNativeValue(value)
      },
      setNativeValue(val) {
        // console.log('setNativeValue', formItem, val)
        this.callComponent(this.formItem, 'mtFormChange', [val])
        this.setData({
          nativeValue: val
        })
      }
    }
  }
</script>
